<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button>点我跳转</button>
		<input type="text" name="" id="" value="" />
		<button>点我</button>
		
		<!--进度条-->
		<progress value="0" width="100px" height="20px" max="100"></progress>
		
		
		<script type="text/javascript">
			
			var btn = document.getElementsByTagName("button");
			var Input = document.getElementsByTagName("input")[0];
			btn[0].onclick = function(){
				var inputValue = Input.value;
				location.href = "系统对象.html?keyword="+inputValue;         //跳转
			}
			
			btn[1].onclick = function(){
						//前进
						
						var inputValue = Input.value;
						localStorage.getItem("keyword",inputValue);
						
						
			}

			var xhr = new XMLHttpRequest();
			var src = "http:dl.stream.qqmusic.qq.com/C400001U0Xmc0PIlYu.m4a?vkey=537E2A74ED27A026D961514D6D67722D5CA4AD7E3320F298311F6C76EC76AC9EA4A30A6B1CCBDBED8236781FA401017594E676612FC22B30&guid=3478671296&uin=0&fromtag=66";  
			xhr.open('get',src,true);
			
			xhr.send();
			xhr.addEventListener("readystatechange",function(e){
				var res = e.target;
				if(res.ready==4){
					if(res.state == 200){
						console.log("请求成功");
					}
				}
			})
			xhr.addEventListener("progress",function(e){
				console.log(e);
			})
		 	
		 	
		 	xhr.onprogress = function (e){
		 		if(e.lengthComputable){
		 			progress.setAttribute("value",e.loaded);
		 			progress.setAttribute("max",e.total);
		 		}
		 	}
			
		</script>
	</body>
</html>
